import React, { FC, useState, useEffect } from 'react'
import Recommend from '@/compents/Recommend'
import Tags from '@/compents/Tags'
import Swiper from '@/compents/Swiper'
import { getAllList } from '@/api/article'
import {
  HeartOutlined,
  EyeOutlined,
  ShareAltOutlined
} from '@ant-design/icons'

import { Affix, FloatButton } from 'antd'

import { useNavigate } from 'react-router-dom'
import style from '../compent.module.scss'

const Index: FC = () => {
  const [allList, setAllList] = useState([])
  const navigate = useNavigate()

  useEffect(() => {
    getAllList()
      .then(({ data }) => {
        console.log(data.data[0])
        setAllList(data.data[0])
      })
      .catch((err) => {
        console.log(err)
      })
  }, [])

  return (
    <div className={style.con}>
      <div className={style.left}>
        <Swiper />
        <nav>
          <a className="active" href="/en">
            all
          </a>
          <span
            onClick={() => {
              navigate('/category/node')
            }}
          >
            node
          </span>
          <span
            onClick={() => {
              navigate('/category/vue')
            }}
          >
            vue
          </span>
          <span
            onClick={() => {
              navigate('/category/react')
            }}
          >
            react
          </span>
          <span
            onClick={() => {
              navigate('/category/interview')
            }}
          >
            面试
          </span>
          <span
            onClick={() => {
              navigate('/category/front-end')
            }}
          >
            前端
          </span>
          <span
            onClick={() => {
              navigate('/category/back-end')
            }}
          >
            后端
          </span>
          <span
            onClick={() => {
              navigate('/category/coding')
            }}
          >
            编程
          </span>
          <span
            onClick={() => {
              navigate('/category/develop')
            }}
          >
            开发
          </span>
          <span
            onClick={() => {
              navigate('/category/code%20life')
            }}
          >
            代码人生
          </span>
          <span
            onClick={() => {
              navigate('/category/life')
            }}
          >
            人生
          </span>
        </nav>
        <main>
          {allList.map((item: any) => {
            return (
              <div
                className={style.item}
                key={item.id}
                onClick={() => {
                  // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
                  navigate('/details/' + item.id, { state: item })
                }}
              >
                <div className={style.head}>
                  {item.title} | {item.category.label}
                </div>
                <div className={style.main}>
                  <img src={item.cover} alt="" />
                  <div>
                    <HeartOutlined />
                    <span>{item.likes}</span> · <EyeOutlined />
                    <span>{item.likes}</span> · <EyeOutlined />
                    <span>{item.views}</span> · <ShareAltOutlined />
                  </div>
                </div>
              </div>
            )
          })}
        </main>
      </div>
      <div className={style.right}>
        <Affix offsetTop={20}>
          <Recommend />
          <Tags />
          <FloatButton.BackTop />
        </Affix>
      </div>
    </div>
  )
}

export default Index
